@extends('layouts.user-no-nav')
@section('page_title', __('USDT Payment'))

@section('styles')
<style>
    .payment-container {
        max-width: 600px;
        margin: 20px auto;
        padding: 20px;
    }
    .step {
        margin-bottom: 30px;
    }
    .step-number {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background-color: #4CAF50;
        color: white;
        margin-right: 10px;
    }
    .network-select {
        width: 100%;
        padding: 10px;
        margin: 10px 0;
        border: 1px solid #ddd;
        border-radius: 5px;
    }
    .qr-container {
        text-align: center;
        margin: 20px 0;
        padding: 20px;
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 8px;
    }
    .qr-container img {
        max-width: 200px;
        height: auto;
    }
    .address-container {
        background: #f5f5f5;
        padding: 15px;
        border-radius: 5px;
        margin: 10px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .copy-btn {
        background: #000;
        color: white;
        border: none;
        padding: 8px 15px;
        border-radius: 5px;
        cursor: pointer;
    }
    #qrcode {
        display: inline-block;
        padding: 10px;
        background: white;
    }
    #qrcode img {
        display: block;
        margin: 0 auto;
    }
    .amount-info {
        text-align: center;
        margin: 15px 0;
        padding: 10px;
        background: #f8f9fa;
        border-radius: 5px;
        font-size: 16px;
        color: #333;
        font-weight: 500;
    }
</style>
@stop

@section('content')
<div class="payment-container">
    <h1>Payment</h1>
    
    <div class="step">
        <span class="step-number">1</span>
        <span>Coin Kind</span>
        <div>
            <select class="network-select" id="currency" disabled>
                <option value="USDT" selected>USDT</option>
            </select>
        </div>
    </div>

    <div class="step">
        <span class="step-number">2</span>
        <span>Select Network</span>
        <div>
            <select class="network-select" id="network" onchange="updateWalletAddress()">
                @foreach($wallets as $wallet)
                    <option value="{{ $wallet['wallet_type'] }}">{{ $wallet['wallet_type'] }}</option>
                @endforeach
            </select>
        </div>
    </div>

    <div class="step">
        <span class="step-number">3</span>
        <span>Payment Detail</span>
        <div class="qr-container">
            <div id="qrcode"></div>
            <div class="amount-info">
                The transaction amount is <text id="amount">{{ $amount }}</text> USDT
            </div>
        </div>
        <div class="address-container">
            <span id="wallet-address" class="address"></span>
            <button class="copy-btn" onclick="copyAddress()">copy</button>
        </div>
    </div>
</div>
@stop

@section('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<script>
    // 创建钱包地址映射对象
    const walletAddresses = {};
    @foreach($wallets as $wallet)
        walletAddresses['{{ $wallet['wallet_type'] }}'] = '{{ $wallet['wallet_address'] }}';
    @endforeach

    var pay_amount = parseFloat("{{$amount}}");

    function generateQRCode(text) {
        document.getElementById('qrcode').innerHTML = '';
        new QRCode(document.getElementById('qrcode'), {
            text: text,
            width: 200,
            height: 200,
            colorDark: '#000000',
            colorLight: '#ffffff',
            correctLevel: QRCode.CorrectLevel.H
        });
    }

    function updateWalletAddress() {
        const network = document.getElementById('network').value;
        const address = walletAddresses[network];
        document.getElementById('wallet-address').textContent = address;
        generateQRCode(address);
        pushPaymentMessage();
    }

    function pushPaymentMessage(){
        const network = document.getElementById('network').value;
        const address = walletAddresses[network];
        const message = {
            'network': network,
            'wallet': address,
            'amount': "{{$amount}}",
            'extends': JSON.stringify({transaction_id: "{{$transaction_id}}"}),
            'callback': "{{url('payment/usdt/callback')}}",
        };
        $.post("{{$prefix}}/api/v1/trade/create", message, function(data) {
            if (data.code === 0) {
                pay_amount = data.data.pay_amount;
                $('#amount').text(pay_amount);
            }
        })

    }

    function copyAddress() {
        const address = document.getElementById('wallet-address').textContent;
        navigator.clipboard.writeText(address).then(() => {
            alert('ok');
        });
    }

    // 页面加载时初始化二维码
    document.addEventListener('DOMContentLoaded', function() {
        updateWalletAddress();
    });

    // 定时轮训接口：payment/query/status,参数transaction_id,如果data.message返回success表示支付成功
    setInterval(function() {
        $.post("{{url('payment/query/status')}}", {transaction_id: "{{$transaction_id}}"}, function(data) {
            if (data.status === 'success') {
                location.href = data.data.url;
            }
        });
    }, 5000);
</script>
@stop
